<template>
  <div class="my-container">
    <div class="top">
      <div v-if="user" class="info">
        <van-cell-group :border="false">
          <van-cell center>
            <van-image slot="icon" round fit="cover" :src="currentUser.photo" />
            <div slot="title">{{currentUser.name}}</div>
            <van-button
              to="/profile"
              size="small"
              round
            > 编辑资料 </van-button>
          </van-cell>
        </van-cell-group>
        <van-grid :border="false">
          <van-grid-item>
            <template slot="text">
              <div class="num">{{currentUser.art_count}}</div>
              <div class="text">头条</div>
            </template>
          </van-grid-item>
          <van-grid-item>
            <template slot="text">
              <div class="num">{{currentUser.follow_count}}</div>
              <div class="text">关注</div>
            </template>
          </van-grid-item>
          <van-grid-item>
            <template slot="text">
              <div class="num">{{currentUser.fans_count}}</div>
              <div class="text">粉丝</div>
            </template>
          </van-grid-item>
          <van-grid-item>
            <template slot="text">
              <div class="num">{{currentUser.like_count}}</div>
              <div class="text">获赞</div>
            </template>
          </van-grid-item>
        </van-grid>
      </div>
      <div v-else class="not-login">
        <img src="../../assets/img/phone.png" @click="$router.push({name: 'login', query: {returnUrl: '/my'}})">
        <span>登录/注册</span>
      </div>
    </div>
    <van-grid :column-num="2">
      <van-grid-item
        icon-prefix="danger"
        icon="shoucang"
        text="收藏"
      />
      <van-grid-item
        icon-prefix="danger"
        icon="lishi"
        text="历史"
      />
    </van-grid>
    <van-cell-group>
      <van-cell title="消息通知" is-link to="/" />
      <van-cell title="小智同学" is-link to="/chat" />
      <van-cell v-if="user" title="退出登录" @click="onLogout" class="logout" />
    </van-cell-group>
  </div>
</template>

<script>
import { mapState } from 'vuex'
import { getCurrentUser } from '../../api/user.js'

export default {
  name: 'myIndex',
  data () {
    return {
      currentUser: {}
    }
  },
  methods: {
    async loadCurrentUser () {
      const { data } = await getCurrentUser()
      this.currentUser = data.data
    },
    onLogout () { // 退出登录
      this.$dialog.confirm({
        title: '退出提示',
        message: '确认退出吗？'
      })
        .then(() => {
          // on confirm
          this.$store.commit('setUser', null)
        })
        .catch(() => {
          // on cancel
        })
    }
  },
  computed: {
    ...mapState(['user'])
  },
  created () {
    this.loadCurrentUser()
  }
}
</script>

<style scoped>
.top {
  background: url("../../assets/img/banner.png") no-repeat;
  background-size: cover;
  height: 200px;
}
.info {
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.info .van-cell-group, .info .van-cell, .info .van-grid /deep/.van-grid-item__content {
  background: unset;
}
.info .van-image {
  width: 65px;
  height: 65px;
  border: 1px solid #FFFFFF;
  margin-right: 10px;
}
.info .van-cell__title {
  font-family: MicrosoftYaHei;
  font-size: 15px;
  color: #ffffff;
}
.info .van-button {
  width: 68px;
  height: 24px;
}
.info .van-button span {
  font-family: MicrosoftYaHei;
  font-size: 10px;
  color: #666666;
}
.info .num {
  font-family: ArialMT;
  font-size: 18px;
  color: #ffffff;
}
.info .text {
  font-family: MicrosoftYaHei;
  font-size: 12px;
  color: #ffffff;
}
.not-login {
  display: flex;
  align-items: center;
  flex-direction: column;
  justify-content: center;
  height: 100%;
}
.not-login img {
  height: 66px;
  margin-bottom: 8px;
}
.not-login span {
  font-family: MicrosoftYaHei;
  font-size: 14px;
  color: #ffffff;
}
  .logout {text-align: center;}
</style>
